<template>
  <div id="app">
    <!-- 登录页面 -->
    <div v-if="!isLogin">
      <div class="login">
        <div class="Login">
          <div class="title1">疫情数据可视化平台</div>
          <el-form
            :model="form"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            style="width: 450px"
          >
            <el-form-item class="user" label="用户名" prop="username">
              <el-input class="userinput" v-model="form.username" placeholder="admin1"></el-input>
            </el-form-item>

            <el-form-item
              class="pass"
              label="密码"
              prop="password"
              style="width: 450px"
            >
              <el-input
                class="passinput"
                type="password"
                v-model="form.password"
                autocomplete="off"
                placeholder="123321"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="toLogin('ruleForm')"
                style="width: 350px"
                >登录</el-button
              >
              <!-- <el-button
                type="primary"
                @click="toLogin('ruleForm')"
                style="width: 170px"
                >注册</el-button
              > -->
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- <button @click="isLogin = true">跳转</button> -->
    </div>
    <div v-else>
      <el-container>
        <el-header>
          <div class="button">
            <el-radio-group v-model="isCollapse">
              <el-radio-button :label="false">展开</el-radio-button>
              <el-radio-button :label="true">收起</el-radio-button>
            </el-radio-group>
          </div>
          <div class="photo"></div>
          <div class="weather">
            <iframe
              width="500"
              scrolling="no"
              height="60"
              frameborder="0"
              allowtransparency="true"
              src="https://i.tianqi.com?c=code&id=40&py=liuzhou&icon=1&site=16"
            ></iframe>
          </div>

          <el-dropdown>
            <span class="el-dropdown-link">
              <i class="el-icon-date"></i
              ><i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-calendar class="date" v-model="value"> </el-calendar>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button
            type="primary"
            icon="el-icon-right"
            size="small"
            @click="toQuit('ruleForm')"
            round
            >退出</el-button
          >
        </el-header>
        <el-container>
          <el-aside id="open" :width="width">
            <el-menu
              default-active="active"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              :collapse="isCollapse"
              router
            >
              <el-menu-item index="/">
                <i class="el-icon-view"></i>
                <span slot="title">疫情动态</span>
              </el-menu-item>
              <el-menu-item index="/map">
                <i class="el-icon-map-location"></i>
                <span slot="title">疫情地图</span>
              </el-menu-item>
              <el-menu-item index="/current">
                <i class="el-icon-refresh"></i>
                <span slot="title">实时疫情</span>
              </el-menu-item>
              <el-menu-item index="/dataSta">
                <i class="el-icon-s-order"></i>
                <span slot="title">数据统计</span>
              </el-menu-item>
              <el-menu-item index="/knowledge">
                <i class="el-icon-reading"></i>
                <span slot="title">疫情科普</span>
              </el-menu-item>

              <el-menu-item index="/mentalHealth">
                <i class="el-icon-setting"></i>
                <span slot="title">疫情心理健康领航</span>
              </el-menu-item>
              <el-menu-item index="/Wenjuan">
                <i class="el-icon-edit"></i>
                <span slot="title">疫情知识问答</span>
              </el-menu-item>
              <el-menu-item index="/hosp">
                <i class="el-icon-office-building"></i>
                <span slot="title">定点医院</span>
              </el-menu-item>
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-user-solid"></i>
                  <span>基础配置</span>
                </template>
                <el-menu-item index="/UserControl">
                  <i class="el-icon-document"></i>
                  <span slot="title">用户管理</span>
                </el-menu-item>
                <el-menu-item index="/Permission">
                  <i class="el-icon-document"></i>
                  <span slot="title">权限设置</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="/manage">
                <template slot="title">
                  <i class="el-icon-suitcase-1"></i>
                  <span>疫情管理</span>
                </template>
                <el-menu-item index="/hospital">定点医院</el-menu-item>
                <el-menu-item index="/infoList">资讯分类</el-menu-item>
                <el-menu-item index="/article">新闻资讯</el-menu-item>
                <el-menu-item index="/rumor">辟谣战疫</el-menu-item>
              </el-submenu>

              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-data-analysis"></i>
                  <span>疫情数据</span>
                </template>
                <el-menu-item index="/list">
                  <i class="el-icon-document"></i>
                  <span slot="title">数据列表</span>
                </el-menu-item>
                <el-menu-item index="/up">
                  <i class="el-icon-sort"></i>
                  <span slot="title">数据上报</span>
                </el-menu-item>
              </el-submenu>
              <el-menu-item index="/core">
                <i class="el-icon-price-tag"></i>
                <span slot="title">各地防疫 </span>
              </el-menu-item>
              <el-menu-item index="/goout">
                <i class="el-icon-setting"></i>
                <span slot="title">出境申请 </span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <!-- 路由对应的组件展示的位子 -->
            <div>
              <router-view></router-view>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
import Login from "./Login";
import axios from "./utils/request";
export default {
  data() {
    // name: "app",
    return {
      value: new Date(),
      isCollapse: true,
      width: 80,

      active: "/",
      isLogin: sessionStorage.getItem("token"),
      form: {},
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },

  methods: {
    // 登录
    toLogin(formName) {
      this.$refs[formName].validate(async (valid) => {
        // 校验通过
        if (valid) {
          let res = await axios.post("/user/login", this.form);
          if (res.status == 200) {
            //  存token到sessionStorage中
            sessionStorage.setItem("token", res.data.token);
            this.isLogin = true;
          } else {
            //  提示登录失败
            this.$notify.error({
              title: "错误",
              message: res.statusText,
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 退出
    async toQuit() {
      this.$confirm("退出用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios.post("/user/logout");
          sessionStorage.clear();
          this.isLogin = false;
          this.$message({
            type: "success",
            message: "退出成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
      this.width = 200;
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  created() {
    this.active = location.hash.slice(1);
  },
};
</script>
<style>
body {
  padding: 0;
  margin: 0;
}
.el-header {
  background-color: white;
  color: #ffff;
  /* text-align: center; */
  line-height: 60px;
  padding: 0 0;
}

.el-aside {
  /* background-color: #d3dce6; */
  color: #333;
  /* text-align: center; */
  line-height: 200px;
  height: calc(100vh - 60px);
  min-height: 500px;
}

.el-main {
  /* background-color: #e9eef3; */
  background-color: azure;
  /* background-color: #f2f2f2; */
  color: #333;
  /* text-align: center; */
  /* line-height: 160px; */
  height: calc(100vh - 60px);
  min-height: 500px;
  padding: 10px !important;
}
.el-main > div {
  background-color: #fff;
  border-radius: 10px;
  /* height: calc(100% - 40px); */
  padding: 20px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.button {
  float: left;
  width: 180px;
  background-color: white;
}
.photo {
  width: 600px;
  height: 60px;
  float: left;
  background-image: url("./assets/疫情1.png");
  background-size: 600px 60px;
}

.weather {
  float: left;
  /* padding-left: 40px; */
  margin-top: 20px;
}

.login {
  width: 100%;
  height: 722px;
  background-image: url("./assets/疫情四.jpg");
  background-size: 100% 722px;
}
.title1 {
  color: #ffff;
  font-size: 35px;
  font-weight: 600;
  /* float: left; */
  margin-left: 118px;
  margin-top: 150px;
  /* text-align: center; */
  line-height: 110px;
}

.Login {
  float: left;
  margin-top: 10px;
  margin-left: 480px;
}
.user .el-form-item__label {
  color: #fff;
  font-weight: 600;
  font-size: 18px;
}
.pass .el-form-item__label {
  color: #fff;
  font-weight: 600;
  font-size: 18px;
}
.userinput .el-input__inner {
  /* width: 450px; */
  height: 42px;
}
.passinput .el-input__inner {
  /* width: 450px; */
  height: 42px;
}
.el-icon-date {
  color: #000;
  font-size: 23px;
  float: left;
  /* margin-right: 15px; */
  margin-top: 20px;
}
.el-icon--right {
  color: #000;
  float: left;
  margin-top: 30px;
}
.el-dropdown {
  float: left;
  margin-right: 20px;
}
.date {
  width: 400px;
  height: 420px;
  font-size: 20px;
  /* line-height: 5px; */
}
.el-calendar-table .el-calendar-day {
  height: 50px !important;
}
</style>